<template>
  <t-modal
    title="上传"
    width="900px"
    :visible="visible"
    @cancel="closeModal()"
    @ok="onSubmit()"
    wrapClassName="add-modal-container"
    v-bind="footer"
    forceRender
    :confirmLoading="submitLoading"
  >
    <div class="curve-modal-body">
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item
          label="图片"
          prop="files"
          :rules="{
            required: true,
            message: '请选择图片',
          }"
        >
          <bjUploadImg
            :count="30"
            v-model="form.files"
            @change="upLoadImage($event)"
            replaceField="url"
          ></bjUploadImg>
        </a-form-model-item>
      </a-form-model>
    </div>
  </t-modal>
</template>

<script>
import { axios } from "@/utils/request";
//上传图片
import bjUploadImg from "@/components/extendCustom/bj-upload-img";
import { approveSealSampleManage } from "@/api/design";
export default {
  components: {
    bjUploadImg,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      footer: {},
      submitLoading: false,
      form: {
        //文件
        files: [],
      },
      rules: {},
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
        }
      },
      immediate: true,
    },
  },

  methods: {
    //上传图片
    upLoadImage({ file, index }) {
      let formData = new FormData();
      formData.append("bucket", "yx-cloud-vue");
      formData.append("file", file);
      this.$set(this.form["files"][index], "loading", true);
      axios
        .post(`/document/minio/uploadfile`, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          this.$set(this.form["files"][index], "dfsFileUuid", res.dfsFileUuid);
          this.$set(this.form["files"][index], "url", res.url);
        })
        .catch((_) => {
          this.$set(this.form["files"][index], "fail", true);
        })
        .finally((_) => {
          this.$set(this.form["files"][index], "loading", false);
        });
    },

    onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let { form, row } = this;
          const images = form.files.map(
            ({ $$DataType, file, loading, ...keepAttrs }) => keepAttrs
          );
          let formJson = {
            //数据id
            uuid: row.uuid,
            //施工封样
            constructionSealingSample: JSON.stringify(images),
            //审批结果
            operate: 2,
            //审批意见
            reason: "同意",
          };
          this.submitLoading = true;
          approveSealSampleManage(formJson)
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                this.$message.success("上传成功", 1.5);
                this.closeModal();
                this.$parent.getTableData();
              } else {
                this.$message.error(res?.message ?? "上传失败");
              }
            })
            .catch((_) => {})
            .finally((_) => {
              this.submitLoading = false;
            });
        }
      });
    },

    //重置表单
    resetForm() {
      this.form = {
        //文件
        files: [],
      };
      this.$refs.ruleForm.resetFields();
    },

    //关闭
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0 !important;
    .curve-modal-body {
      box-sizing: border-box;
      padding: 14px 70px 14px 40px;
      max-height: 700px;
      overflow: auto;
      .ant-form-item {
        display: flex;
        .ant-form-item-label {
          flex-shrink: 0;
          width: 140px;
          label {
            color: #333333;
          }
        }
        .ant-form-item-control-wrapper {
          flex: 1;
          overflow: hidden;
        }
      }
      .bj-upload-file {
        .choosed-file-warp {
          width: 100%;
        }
      }
    }
  }
}
</style>
